<template>
  <baidu-map
    class="BaiduMap"
    :center="center"
    :zoom="zoom"
    ref="map"
    MapType="BMAP_HYBRID_MAP"
    NavigationControlType="BMAP_NAVIGATION_CONTROL_SMALL"
    @ready="handler"
  >
    <!-- 控件 -->
    <!-- 比例尺 -->
    <!-- <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale> -->
    <!-- 缩放控件 -->
    <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
    <!-- 地图类型控件 -->
    <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
    <!-- 缩略图控件 左下角小地图-->
    <!-- <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map> -->
    <!-- 定位控件 点击定位到当前点-->
    <!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> -->
    <!-- 在地图右上角加入版权信息控件 -->
    <!-- <bm-copyright
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :copyright="[
        {
          id: 1,
          content: 'Copyright Message',
          bounds: { ne: { lng: 110, lat: 40 }, sw: { lng: 0, lat: 0 } },
        },
        { id: 2, content: '<a>我是版权信息</a>' },
      ]"
    >
    </bm-copyright> -->
    <!-- 在地图左上角加入城市切换控件 changeBefore切换城市前触发此事件 changeBefore切换城市后触发此事件-->
    <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->
    <!-- 自定义控件 -->
    <!-- <bm-control>
      <button @click="addZoom(19)">缩放至最大</button>
      <button @click="addZoom(16)">还原</button>
      <button @click="addZoom(3)">缩放至最小</button>
    </bm-control> -->
    <!-- 覆盖物 -->
    <!-- 在地图中心添加可拖动的跳跃点标记 -->
    <bm-marker
      :position="center"
      :dragging="true"
      animation="BMAP_ANIMATION_BOUNCE"
    >
      <bm-label
        content="跳一跳"
        :labelStyle="{ color: 'pink', fontSize: '16px' }"
        :offset="{ width: -35, height: 30 }"
      />
    </bm-marker>
    <!-- 自定义图标的点 -->
    <!-- <bm-marker
          :position="center"
          :dragging="false"
          :icon="{
            url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif',
            size: { width: 300, height: 157 },
          }"
        ></bm-marker> -->
    <!-- 点击 Marker 弹出 InfoWindow 弹窗-->
    <!-- <bm-marker :position="posCenter" :dragging="false" @click="infoWindowOpen">
      <bm-info-window
        :show="show"
        @close="infoWindowClose"
        @open="infoWindowOpen"
      >
        <info-window></info-window>
      </bm-info-window>
    </bm-marker> -->
    <!-- 大量点 -->
    <!-- <bm-point-collection
      :points="points"
      shape="BMAP_POINT_SHAPE_STAR"
      color="red"
      size="BMAP_POINT_SIZE_NORMAL"
      @click="clickHandler"
    >
    </bm-point-collection> -->
    <!-- <my-overlay
      :position="posCenter"
      text="点击我"
      :active="active"
      @mouseover.native="active = true"
      @mouseleave.native="active = false">
    </my-overlay> -->
    <!-- 图层 -->
    <!-- <bm-tile
      :isTransparentPng="true"
      tileUrlTemplate="//developer.baidu.com/map/jsdemo/demo/tiles/{Z}/tile{X}_{Y}.png">
    </bm-tile> -->
    <!-- 点聚合 -->
    <bml-marker-clusterer :averageCenter="false">
      <bm-marker
        v-for="(marker, index) of points"
        :position="{ lng: marker.lng, lat: marker.lat }"
        :key="index"
        @click="markerClick(index, marker)"
      >
        <bm-info-window
          :show="marker.show"
          @close="infoWindowClose"
          @open="infoWindowOpen"
        >
          <info-window :content="marker"></info-window>
        </bm-info-window>
      </bm-marker>
    </bml-marker-clusterer>
  </baidu-map>
</template>

<script>
import MyOverlay from "@/components/MyOverlay.vue";
import InfoWindow from "@/components/infoWindow.vue";
import { BmlMarkerClusterer } from "vue-baidu-map";

export default {
  name: "vueMap",
  components: { MyOverlay, InfoWindow, BmlMarkerClusterer },
  data() {
    return {
      // 百度地图初始化数据
      center: {
        //经纬度位置
        lng: 113.843305,
        lat: 22.593597,
      },
      zoom: 16, //缩放比例
      scrollWheelZoom: true, //滚动缩放
      map: {}, //是地图对象，可以调用对应的地图方法，比如添加 marker（标记点）
      BMap: {}, //是百度地图的对象，直接new出来跟原始的百度地图API一样使用
      myPoint: {}, //当前位置
      myPointMk: {}, // 当前位置mk覆盖物
      styleJson: [
        // 百度地图
        {
          featureType: "water",
          elementType: "all",
          stylers: {
            color: "#ffffff",
          },
        },
      ],
      posCenter: {
        //经纬度位置
        lng: 113.843305,
        lat: 22.593597,
      },
      show: false,
      points: [],
      active: false,
    };
  },
  created() {},

  methods: {
    // ready 地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例。
    // 百度地图组件是异步加载，请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。
    handler({ BMap, map }) {
      this.map = map;
      this.BMap = BMap;
      let that = this;
      // 获取当前位置
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(async function (res) {

        that.center = res.point;
        that.addPoints();
      });
      // click 添加点击事件
      // About.vue 页面可以看到所有事件
      map.addEventListener("click", function (e) {
        console.log("我点击了" + e);
      });
    },
    // 自定义控件
    addZoom(level) {
      this.zoom = level;
    },
    infoWindowClose() {
      this.points.map((item) => {
        return (item.show = false);
      });
      console.log(this.points);
    },
    infoWindowOpen() {
      this.show = true;
    },
    // 大量的点
    clickHandler(e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
    },
    addPoints() {
      let points = [];
      for (let index = 0; index < 8; index++) {
        let x = Math.ceil(Math.random() * 100) / 10000;
        let y = Math.ceil(Math.random() * 100) / 10000;
        x = x > 0.005 ? this.center.lat - x : this.center.lat + x;
        y = y > 0.005 ? this.center.lng - y : this.center.lng + y;

        const position = { lng: y, lat: x, show: false };
        points.push(position);
      }
      console.log(points);
      this.points = points;
    },
    async markerClick(i, marker) {
      await this.infoWindowClose();
      this.points[i].show = true;
    },
  },
};
</script>
<style scoped>
.BaiduMap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
